<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .page-main {
            margin-bottom: 0px;
        }

        .main-head {
            background: #fff;
            margin-bottom: 0px;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .el-tabs--border-card > .el-tabs__content {
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">隐患排查台账>风险统计
        <el-button @click="exportData" type="primary" style="float: right">导出风险统计</el-button>
    </div>
    <div class="page-main">
        <div class="main-head">
            <el-form :inline="true" size="small">
                <el-form-item label="区域名称">
                    <el-input placeholder="请输入" class="inputW" v-model="zone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="month" type="month" placeholder="选择月" style="width: 120px;">
                    </el-date-picker>
                </el-form-item>
                <!--                <el-form-item>-->
                <!--                    <el-date-picker v-model="month" type="month" placeholder="选择月" style="width: 120px;">-->
                <!--                    </el-date-picker>-->
                <!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="primary" @click="exportData">导出</el-button>
                </el-form-item>
                0 >= 任务完成率 < 60
                <el-tag color="red">
                    红
                </el-tag>
                60 >= 任务完成率 < 70
                <el-tag color="orange">
                    橙
                </el-tag>
                70 >= 任务完成率 < 80
                <el-tag color="yellow">
                    黄
                </el-tag>
                80 >= 任务完成率=< 100
                <el-tag color="blue">
                    蓝
                </el-tag>
            </el-form>
        </div>
        <el-table :data="zoneData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column prop="zone" label="区域名称">
            </el-table-column>
            <el-table-column prop="total" label="任务总数"></el-table-column>
            <el-table-column prop="finished" label="任务完成数"></el-table-column>
            <el-table-column prop="finish" label="任务未完成数"></el-table-column>
            <el-table-column prop="finish_timeout" label="任务超时数"></el-table-column>
            <el-table-column prop="finishedrate" label="任务完成率%"></el-table-column>
            <el-table-column label="任务巡查警示">
                <template slot-scope="scope">
                    <template v-if="scope.row.finishedrate>=0&&scope.row.finishedrate<60">
                        <el-tag color="red">
                            红
                        </el-tag>
                    </template>
                    <template v-if="scope.row.finishedrate>=60&&scope.row.finishedrate<70">
                        <el-tag color="orange">
                            橙
                        </el-tag>
                    </template>
                    <template v-if="scope.row.finishedrate>=70&&scope.row.finishedrate<80">
                        <el-tag color="yellow">
                            黄
                        </el-tag>
                    </template>
                    <template v-if="scope.row.finishedrate>=80&&scope.row.finishedrate<=100">
                        <el-tag color="blue">
                            蓝
                        </el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300px" align="center">
                <template slot-scope="scope">
                    <el-button @click="showDetail(scope.row.zone)" round size="mini"
                    >查看企业
                    </el-button>
                    <el-button @click="HierarchyUrgent(scope.row.zone)" round size="mini"
                    >催巡
                    </el-button>
                    <!--                                icon="el-icon-share"-->
                </template>
            </el-table-column>
        </el-table>
        <div class="">
            <el-pagination background layout="prev, pager, next" :pagesize="pagesize"
                           :total="totalCount"
                           :current-page.sync="pageno" @current-change="ChangePage">
            </el-pagination>
        </div>
    </div>
    <el-dialog title="企业巡查情况统计" :visible.sync="detailFormVisible" :show-close="false">
        <el-button type="primary" @click="exportDataQy">导出</el-button>
        <template v-if="DetailData">
            <el-table :data="DetailData" style="margin-bottom: 40px" :stripe="true" :border="true"
                      size="mini"
                      style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="projectName" label="企业名称"></el-table-column>
                <el-table-column prop="total" label="任务总数"></el-table-column>
                <el-table-column prop="finished" label="任务完成数"></el-table-column>
                <el-table-column prop="finish" label="任务未完成数"></el-table-column>
                <el-table-column prop="finish_timeout" label="任务超时数"></el-table-column>
                <el-table-column prop="finishedrate" label="任务完成率%"></el-table-column>
                <el-table-column label="任务巡查警示">
                    <template slot-scope="scope">
                        <template v-if="scope.row.finishedrate>=0&&scope.row.finishedrate<60">
                            <el-tag color="red">
                                红
                            </el-tag>
                        </template>
                        <template v-if="scope.row.finishedrate>=60&&scope.row.finishedrate<70">
                            <el-tag color="orange">
                                橙
                            </el-tag>
                        </template>
                        <template v-if="scope.row.finishedrate>=70&&scope.row.finishedrate<80">
                            <el-tag color="yellow">
                                黄
                            </el-tag>
                        </template>
                        <template v-if="scope.row.finishedrate>=80&&scope.row.finishedrate<=100">
                            <el-tag color="blue">
                                蓝
                            </el-tag>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div slot="footer" class="dialog-footer" style="margin-bottom: 30px">
            <el-button @click="cancelDetail">确定</el-button>
        </div>
        <div class="page-footer" style="margin-top: 50px">
            <el-pagination background layout="prev, pager, next" :pagesize="Dpagesize" :total="DtotalCount"
                           :current-page.sync="Dpageno" @current-change="DonChangePage">
            </el-pagination>
        </div>

    </el-dialog>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
            el: '#page-monitor',
            data: {
                month: '',
                currentPage: 1,
                pageno: 1,
                pagesize: 10,
                totalCount: 0,
                zoneData: [],
                projectNo: '',
                zone: '',
                wf_tasktime: '',
                editMod: false,
                CheckZone: '',
                DetailData: [],
                Dpagesize: 10,
                Dpageno: 1,
                DtotalCount: 0,
                detailFormVisible: false,
            },
            created: function () {
                this.month = TimeUtil.convertToString(new Date()).substr(0, 7);
                this.getZoneData();
            },
            methods: {
                cancelDetail() {
                    this.detailFormVisible = false;
                    this.DetailData = {};
                },
                DonChangePage(page) {
                    this.Dpageno = page;
                    this.showDetail(this.CheckZone);
                },
                showDetail(zone) {
                    if (zone) {
                        this.CheckZone = zone;
                        this.detailFormVisible = true;
                        var param = {};
                        param.wf_tasktime = this.ToDate();
                        param.zone = zone;
                        param.pageno = this.Dpageno;
                        param.pagesize = this.Dpagesize;
                        HttpUtil.get('GovStatistics/getZoneByBusinessRiskPercent', param).success((res) => {
                            vuePage.DetailData = res.data;
                            vuePage.DtotalCount = res.total;
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '未有详情！'
                        });
                    }
                },
                HierarchyUrgent(zone) {
                    if (zone) {
                        var param = {};
                        param.zone = zone;
                        HttpUtil.get('GovStatistics/HierarchyUrgent', param).success((res) => {
                            if (res.data == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '催巡成功！'
                                });
                            }
                            else {
                                this.$message({
                                    type: 'error',
                                    message: '催巡失败！'
                                });
                            }
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '未有区域！'
                        });
                    }
                },
                editClick(row) {
                    this.param = row;
                    this.dialogFormVisible = true;
                    this.editMod = true;
                },
                exportDataQy() {
                    var param = {};
                    param.zone = this.CheckZone;
                    HttpUtil.get('GovStatistics/ExportZoneByBusinessRiskPercent', param).success((res) => {
                        this.$message.success('导出成功');
                        window.location = SiteConfig.webApiset + res.data;
                    })
                },
                exportData() {
                    HttpUtil.get('GovStatistics/ExportRiskPercentByZone').success((res) => {
                        this.$message.success('导出成功');
                        window.location = SiteConfig.webApiset + res.data;
                    })
                }
                ,
                p(s) {
                    return s < 10 ? '0' + s : s
                }
                ,
                ToDate() {
                    const d = new Date(this.month);
                    const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
                    const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds());
                    return resDate;
                }
                ,
                ChangePage(page) {
                    this.pageno = page;
                    this.getZoneData()
                }
                ,
                search: function () {
                    this.getZoneData();
                }
                ,
                getZoneData: function () {
                    var param = {};
                    if (this.zone)
                        param.zone = this.zone;
                    param.wf_tasktime = this.ToDate();
                    param.pageno = this.pageno;
                    param.pagesize = this.pagesize;
                    param.UserId = SiteConfig.account.id;
                    HttpUtil.get('GovStatistics/getRiskPercentByZone', param).success((res) => {
                        this.zoneData = res.data;
                        this.totalCount = res.total;
                    })
                }
            },

            mounted: function () {

            }
        })
    ;
</script>
</body>
</html>
